<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.组件_基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			/* 
				在Vue中使用组件，一共分为三步：
							第一步：创建组件
							第二步：注册组件
							第三步：使用组件（编写组件标签）
				
				第一步：创建组件，注意点：1.el不能写；2.data必须写成函数；③记得写结构（template）
				第二步：注册组件，使用components配置项。
				第三步：使用组件，<Person></Person>
			*/

			//创建一个Person组件
			let Person = Vue.extend({
				template:`
					<div>
						<h1>人员信息</h1>
						<h4>姓名：{{pname}}</h4>
						<h4>年龄：{{age}}</h4>
						<button @click="showPersonInfo">点我提示个人信息</button>
					</div>
				`,
				data() {
					return {
						pname:'强哥',
						age:18
					}
				},
				methods:{
					showPersonInfo(){
						alert('人的信息：' + this.pname + '-' + this.age)
					}
				}
			})

			//创建一个School组件
			let School = Vue.extend({
				template:`
					<div>
						<h1>学校信息</h1>
						<h4>名称：{{sname}}</h4>
						<h4>地址：{{address}}</h4>
						<button @click="showSchoolInfo">点我提示学校信息</button>
					</div>
				`,
				data() {
					return {
						sname:'尚硅谷',
						address:'宏福科技园'
					}
				},
				methods:{
					showSchoolInfo(){
						alert('学校信息：' + this.sname + '-' + this.address)
					}
				}
			})
			
			new Vue({
				el:'#demo',
				components:{Person,School}, //注册组件
				template:`
					<div>
						<Person></Person>
						<hr>
						<School></School>
					</div>
				`
			})
		</script>
	</body>
</html>